<template>
  <div class="account-box">
    <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
    <mt-field label="新密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
    <mt-field label="确认密码" placeholder="请确认密码" type="password" v-model="rePassword"></mt-field>
    <mt-tabbar v-model="selected">
      <mt-tab-item>
        <router-link :to="{path: '/login'}">登录</router-link>
      </mt-tab-item>
      <mt-tab-item>
        <router-link :to="{path: '/register'}">注册帐号</router-link>
      </mt-tab-item>
    </mt-tabbar>

    <mt-button class="account-login-btn" type="primary" size="small" @click="resetPwd">修改密码</mt-button>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';

export default {
  data () {
    return {
      username: '',
      password: '',
      rePassword: '',
      selected: ''
    }
  },
  methods: {
    resetPwd () {
      var userInfo = JSON.parse(this.getItemStorange("userInfo"));
      if(userInfo.username === this.username) {
        if(this.password.length < 6) {
          Toast('密码不能小于6位');
        } else if(this.password != this.rePassword) {
          Toast('两次密码输入有误');
        } else {
          userInfo.password = this.password;
          userInfo.rePassword = this.rePassword;
          this.setItemStorange("userInfo", JSON.stringify(userInfo));
          Toast('密码修改成功');
          this.$router.push('/login');
        }
      } else {
        Toast('用户名输入错误或当前用户名不存在');
      }
    }
  }
}
</script>

<style lang="less">
  .account-box {
    padding: 70px 20px;
    .mint-cell {
      min-height: 40px;
    }
    .mint-cell-wrapper {
      background-position: bottom left;
      padding: 0;
    }
    .mint-cell-text {
      font-size: 12px;
      padding-left: 15px;
    }
    .mint-field-core {
      font-size: 12px;
    }
    .account-login-btn {
      margin-top: 25px;
      width: 100%;
    }
    .mint-tab-item-label {
      padding: 10px 0;
    }
  }
</style>